<template>
  <div class="body">
    <div class="main">
      <router-view></router-view>
    </div>
    <foot></foot>
    <div class="cover" v-if="this.$store.state.coverable" @click="clickCover"></div>
    <div class="barCover" v-if="this.$store.state.barCoverable" @click="clickCover"></div>
    <div class="infoWindow" v-show="showInfo">
      <div class="placeholder"></div>
      <p>{{info.title}}</p>
      <span id="content">{{info.content}}</span>
      <img :src="info.url" v-if="info.url">
      <img v-else src="../../assets/img/icon/noImg.svg">
      <span id="appeal"><span v-if="info.appeal> 0">申诉备注：</span>{{info.appeal}}</span>
    </div>
  </div>
</template>

<script>
// 引入公共的导航栏
import foot from './Foot2'
export default {
  name: 'baseurl2',
  components: {
    foot: foot
  },
  computed: {
    showInfo: function () {
      return this.$store.state.showInfo
    },
    info: function () {
      return this.$store.state.info
    }
  },
  methods: {
    clickCover: function () {
      if (this.$store.state.showInfo) {
        this.$store.commit('setShowInfo', false)
        this.$store.commit('changeCoverableState', false)
        this.$store.commit('changeBarCoverableState', false)
      }
    }
  }
}
</script>

<style scoped lang="scss">
  body {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .main{
    height: calc(100% - #{px2rem(55)});
    overflow: hidden;
  }
  .cover{
    width: 100%;
    height: 100%;
    background:rgba(38,38,38,0.45);
    float: left;
    position: absolute;
    top: 0;
    z-index: 2;
  }
  .barCover{
    width: 100%;
    height: 100%;
    background:rgba(38,38,38,0.45);
    float: left;
    position: absolute;
    z-index: 2;
  }
  .infoWindow{
    width: px2rem(280);
    height: px2rem(350);
    background:rgba(255,255,255,1);
    opacity:1;
    border-radius:px2rem(31);
    position: absolute;
    float: left;
    /*left: px2rem(48);*/
    left: calc(50% - #{px2rem(140)});
    /*margin: auto;*/
    bottom: px2rem(158);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    .placeholder{
      width: px2rem(10);
      height: px2rem(25);
      background: white;
      border-radius:px2rem(31);
    }
    p{
      /*background: #02A4ED;*/
      /*margin-top: px2rem(25);*/
      display: block;
      /*padding-top: px2rem(25);*/
      width: px2rem(192);
      height: px2rem(33);
      font-size:px2rem(24);
      font-family:PingFang SC;
      font-weight:bold;
      line-height:px2rem(33);
      color:rgba(38,38,38,1);
      overflow: auto;
      text-align: center;
    }
    #content{
      width: px2rem(252);
      height: px2rem(40);
      margin-top: px2rem(5);
      font-size:px2rem(14);
      font-family:PingFang SC;
      font-weight:500;
      line-height:px2rem(20);
      color:rgba(153,153,153,1);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      overflow: auto;
      text-align: center;
    }
    img{
      margin-top: px2rem(20);
        width: px2rem(156);
      height: px2rem(156);
    }
    #appeal{
      margin-top: px2rem(25);
      width:px2rem(252);
      height:px2rem(50);
      font-size:px2rem(14);
      font-family:PingFang SC;
      font-weight:400;
      line-height:px2rem(20);
      color:rgba(38,38,38,1);
      display: flex;
      flex-wrap: wrap;
      overflow-y: auto;
      text-align: center;
    }
  }
</style>
